<template>
    <div style="width: 224px">
        <div class="header-title">
            <div class="panel-big-title" style="margin-bottom: 0">固</div>
        </div>
        <BasePanel width="100%" height="260px" :title="`清废（${selectYear}年）`">
            <template #default>
                <div class="panel-content">
                    <div class="label">固废产生量</div>
                    <div class="value-box">
                        <span class="value">{{ panelData.v1 }}</span>
                        <span class="unit">{{ panelData.v1Unit }}</span>
                    </div>
                    <div class="value-box-2">
                        <span class="title">同比</span>
                        <div class="value">
                            <span :style="{ color: panelData.v1CompareColor }">
                                {{ panelData.v1Compare }}
                            </span>
                            <SvgIcon
                                :name="panelData.v1CompareIcon"
                                :color="panelData.v1CompareColor"
                            />
                        </div>
                    </div>
                    <div class="label">处置利用率</div>
                    <div class="info-box">
                        <div class="value-box">
                            <span class="value">{{ panelData.v2 }}</span>
                            <span class="unit">{{ panelData.v2Unit }}</span>
                        </div>
                        <div class="value-box-2">
                            <span class="title">同比</span>
                            <div class="value">
                                <span :style="{ color: panelData.v2CompareColor }">
                                    {{ panelData.v2Compare }}
                                </span>
                                <SvgIcon
                                    :name="panelData.v2CompareIcon"
                                    :color="panelData.v2CompareColor"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </BasePanel>
    </div>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
// import { useGlobalStore } from '@/store/global';
import dayjs from 'dayjs'

// 全局数据
// const globalStore = useGlobalStore()

// 选择的年份
const selectYear = ref(dayjs().year())

// 面板数据
const panelData = reactive({
    v1: '655.55',
    v1Unit: '万吨',
    v1Compare: '7.7%',
    v1CompareIcon: 'down-arrow',
    v1CompareColor: 'rgba(0, 255, 115, 1)',
    v2: '100',
    v2Unit: '%',
    v2Compare: '7.7%',
    v2CompareIcon: 'up-arrow',
    v2CompareColor: 'rgba(0, 255, 115, 1)',
})
</script>

<style lang="scss" scoped>
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

    .tabs-box {
        width: 120px;
    }
}

.el-select-no-border {
    :deep(.el-select__wrapper) {
        font-size: 20px !important;
    }
}

.panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    .label {
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        color: rgba(255, 255, 255, 1);
        height: 20px;
    }

    .value-box {
        display: flex;
        align-items: flex-end;
        gap: 4px;

        .value {
            font-size: 28px;
            font-weight: 400;
            line-height: 28px;
            color: rgba(1, 254, 133, 1);
            height: 28px;
            font-family: Oswald;
        }
        .unit {
            font-size: 16px;
            font-weight: 700;
            line-height: 16px;
            height: 16px;
            color: rgba(255, 255, 255, 1);
        }
    }

    .value-box-2 {
        display: flex;
        align-items: center;
        gap: 4px;

        .title {
            font-size: 16px;
            font-weight: 500;
            height: 16px;
            line-height: 16px;
            color: rgba(255, 255, 255, 1);
        }
        .value {
            font-family: Oswald;
            font-size: 20px;
            font-weight: 400;
            line-height: 20px;
            height: 20px;
            color: rgba(0, 255, 115, 1);
            display: flex;
            align-items: center;
            gap: 4px;
        }
    }

    .info-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}
</style>
